<template>
        <div class="common-layout">
            <header style="background-color: #2662EF; height: 50px; line-height: 50px; padding-left: 50px; color: #fff;">
                <span>{{ username }}</span>
                <span @click="loginOut">退出登录</span>
            </header>
            <div style="display: flex;">
                <div style="flex: 2;">
                    <div class="admin-wrapper">
                        <span @click="() => router.push({ path: '/company' })">公司新闻</span>
                        <span @click="() => router.push({ path: '/category' })" >产品一级</span>
                        <span @click="() => router.push({ path: '/product' })">产品详情</span>
                    </div>
                </div>
                <div style="flex: 14;">
                    <div class="admin-main-inner">
                        <el-main class="main" style="padding: 0;">
                            <section>
                                <router-view v-slot="{ Component }">
                                    <transition name="slide-fade" mode="out-in">
                                        <div :key="route.path">
                                            <component :is="Component"></component>
                                        </div>
                                    </transition>
                                </router-view>
                            </section>
                        </el-main>
                    </div>
                </div>
            </div>
        </div>

</template>
<script setup>
import { useRoute, useRouter } from 'vue-router';
const username = window.localStorage.getItem("username");
const route = useRoute();
const router = useRouter();


const loginOut = () => {
  window.localStorage.removeItem("token");
  window.localStorage.removeItem("username");
  router.push({ path: '/login' });
}
</script>

<style scoped>
.common-layout {
    height: 100vh;
    background-color: #F2F3F5;
}

.admin-wrapper>span {
    display: block;
    padding: 20px;
    cursor: pointer;
}

.admin-wrapper {
    background-color: #ffffff;
    border-right: 1px solid #efe1e1;
    height: 95vh;
    
}
.admin-wrapper > span{
    padding-left: 50px;
}
.admin-wrapper>span:hover {
    background-color: #F2F3F5;
}

.admin-main-inner {
    margin: 20px;

    background-color: #ffffff;
}
</style>